<template>
  <div style="width:100%;heght:100%;">
    <el-container>
        <el-aside width="30%">
            <el-card class="box-card" :body-style="body_style">
                <div slot="header" class="clearfix">
                    <div style="text-align: left;padding-bottom: 10px;border-bottom: 1px solid rgba(0,0,0,.1);display: flex;">
                        <div style="font-weight: 900;font-size: 18px;">
                            角色管理
                        </div>
                        <div style="flex: 1;text-align: right;">
                            <el-select :size="size" v-model="filtes.shopId" placeholder="点击选择店铺" @change="shopChang">
                                <el-option label="点击选择店铺" value="" key=""></el-option>
                                <el-option
                                v-for="item in shopList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                    <div style="text-align: left;padding-top: 10px;">
                        <el-button type="primary" :size="size">新增角色</el-button>
                        <el-button type="danger" :size="size">删除角色</el-button>
                    </div>
                </div>
                <div v-for="item in roleList" :key="item.id" :class="index==item.id? 'itemClick text item' : 'text item'" @click="clickRole(item.id)">
                    {{item.role_name}}
                </div>
            </el-card>
        </el-aside>
        <el-main>
            
        </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
    data(){
        return{
          size:"small",
          index:"",
          filtes:{
              shopId:""
          },
          shopList:[],
          roleList:[],
          radio1: '上海',
          body_style:{
              padding: '0px',
              'text-align': 'left'
          }


        }
    },
    methods:{
        queryShop(){
            let that = this;
            that.utils.request.queryShop({},res=>{
                that.shopList = res.data;
            })
        },
        queryRoleList(params){
            let that = this;
            if(params == null){
                params = {};
            }
            params.t = "sysRole"
            that.utils.request.queryUserList(params,res=>{
                that.roleList = res.data;
            })
        },
        clickRole(roleId){
            console.log("==========选择角色");
            this.index = roleId;
        },
        shopChang(e){
            console.log("选择店铺==========>>>>"+e)
            this.queryRoleList({"shopId":e});
        }
    },
    mounted(){
        this.queryShop();
        this.queryRoleList();
    }
}
</script>

<style scoped>
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
    .text {
        font-size: 14px;
    }

    .item {
       padding: 10px;
       border-bottom: 1px solid rgba(0,0,0,.1);
       cursor: pointer;
    }
    .item:hover{
        border-left: 5px solid #2F4554;
        color: #2F4554;
        cursor: pointer;
    }
    .itemClick{
        border-left: 5px solid #2F4554;
        color: #2F4554;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .el-radio-group{
        width: 100% !important;
        display: block !important;
    }
    .el-radio-button{
        width: 100% !important;
        display: block !important;
    }
    .el-radio-button__inner{
        width: 100% !important;
    }
    .el-card__body{
        padding: 0px;
    }
</style>